<template>
  <div class="f">
    <h2>07 - scoped & deep</h2>
    <p>scoped: 只让样式在当前文件中起作用</p>
    <p>deep：让样式作用到子元素中</p>
    <div class="box">
      我是一个类名为： box 的盒子
    </div>
    <son1 />
  </div>
</template>

<script>
export default {
  components: {
    son1: () => import('./son1')
  }
}
</script>

<style scoped>
.f /deep/ .box {
  width: 200px;
  height: 200px;
  border: 5px solid yellowgreen;
}
</style>
